:root {
    --title-color: #606E7B;
}

:local(.field) {
    composes: flex align-center from "style";
}

:local(.fieldNameTitle) {
    composes: flex-full pr2 from "style";
}

:local(.fieldName) {
    composes: fieldNameTitle;
    font-size: 16px;
}

:local(.fieldNameTextInput) {
    composes: input p1 from "style";
    color: var(--title-color);
    width: 100%;
    font-size: 14px;
}

:local(.fieldSelect) {
    composes: input p1 block from "style";
}

:local(.fieldType) {
    composes: flex-half pr2 from "style";
    overflow: hidden;
    white-space: nowrap;
}

:local(.fieldDataType) {
    composes: flex-half from "style";
}

:local(.fieldSecondary) {
    composes: field;
    font-size: 13px;
}

:local(.fieldActualName) {
    composes: fieldNameTitle;
    composes: text-monospace from "style";
}

:local(.fieldForeignKey) {
    composes: fieldType;
}

:local(.fieldOther) {
    composes: fieldDataType;
}
